<template>
  <div class="home">
    <!-- 顶部统计卡片 -->
    <div class="stat-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="card-header">
          <i class="el-icon-warning"></i>
          <span class="card-title">设备压力统计</span>
        </div>
        <div class="stat-content">
          <el-row :gutter="10">
            <el-col :span="8">
              <div class="stat-item yellow">
                <div class="percentage">{{ pressureStatistics.heightProgress }}%</div>
                <div class="label">压力较高: {{ pressureStatistics.height }}台</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item blue">
                <div class="percentage">{{ pressureStatistics.centerProgress }}%</div>
                <div class="label">压力适中: {{ pressureStatistics.center }}台</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item green">
                <div class="percentage">{{ pressureStatistics.lowProgress }}%</div>
                <div class="label">压力较低: {{ pressureStatistics.low }}台</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>

    <div class="stat-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="card-header">
          <i class="el-icon-data-line"></i>
          <span class="card-title"
            >设备健康度统计 &nbsp;&nbsp;&nbsp;&nbsp;<span style="color: #999">(总体健康度：{{ allhealth }})</span></span
          >
        </div>
        <div class="stat-content">
          <el-row :gutter="10">
            <el-col :span="8">
              <div class="stat-item yellow">
                <div class="percentage">{{ healthStatistics.heightProgress }}%</div>
                <div class="label">亚健康: {{ healthStatistics.height }}台</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item blue">
                <div class="percentage">{{ healthStatistics.centerProgress }}%</div>
                <div class="label">良好: {{ healthStatistics.center }}台</div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="stat-item green">
                <div class="percentage">{{ healthStatistics.lowProgress }}%</div>
                <div class="label">健康: {{ healthStatistics.low }}台</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>

    <div class="stat-cards">
      <el-card class="stat-card" shadow="hover">
        <div class="card-header">
          <i class="el-icon-time"></i>
          <span class="card-title">设备剩余寿命统计</span>
        </div>
        <div class="stat-content">
          <el-row :gutter="10">
            <el-col :span="12">
              <div class="stat-item yellow">
                <div class="percentage">{{ liftStatistics.lowProgress }}%</div>
                <div class="label">剩余寿命较低: {{ liftStatistics.low }}台</div>
              </div>
            </el-col>
            <el-col :span="12">
              <div class="stat-item green">
                <div class="percentage">{{ liftStatistics.heightProgress }}%</div>
                <div class="label">剩余寿命较高: {{ liftStatistics.height }}台</div>
              </div>
            </el-col>
          </el-row>
        </div>
      </el-card>
    </div>
    <div class="detail-cards">
      <div class="cardsBox">
        <el-card class="detail-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>亚健康设备展示 </span>
          </div>
          <el-table
            ref="tableData_realtime"
            @cell-mouse-enter="hover_dibiao"
            @cell-mouse-leave="leave_dibiao"
            :data="healthData"
            height="270"
            style="width: 100%"
          >
            <el-table-column align="center" prop="plc" label="子系统"></el-table-column>
            <el-table-column align="center" prop="string" label="设备编号"></el-table-column>
            <el-table-column align="center" prop="count" label="健康度"> </el-table-column>
          </el-table>
        </el-card>
        <el-card class="detail-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>压力较高设备展示</span>
          </div>
          <el-table
            ref="tableData_realtime1"
            @cell-mouse-enter="hover_dibiao1"
            @cell-mouse-leave="leave_dibiao1"
            :data="pressureData"
            height="270"
            style="width: 100%"
          >
            <el-table-column align="center" prop="plc" label="子系统"></el-table-column>
            <el-table-column align="center" prop="string" label="设备编号"></el-table-column>
            <el-table-column align="center" prop="count" label="压力值"> </el-table-column>
          </el-table>
        </el-card>
      </div>
      <div class="cardsBox cardCenter">
        <el-card class="detail-card cardCenter-detail" shadow="hover">
          <div slot="header" class="card-header">
            <span>子系统健康度 </span>
          </div>
          <div ref="healthChart" style="height: 620px"></div>
        </el-card>
      </div>
      <div class="cardsBox">
        <el-card class="detail-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>预测异常预警</span>
          </div>
          <div class="warning-list" ref="warningList" @mouseenter="stopScroll" @mouseleave="startScroll">
            <div v-for="(item, index) in warningList" :key="index" class="warning-item">
              <i class="el-icon-warning-outline"></i>
              <span>{{ item }}</span>
            </div>
          </div>
        </el-card>
        <el-card class="detail-card" shadow="hover">
          <div slot="header" class="card-header">
            <span>剩余寿命较低设备展示</span>
          </div>
          <el-table
            ref="tableData_realtime2"
            @cell-mouse-enter="hover_dibiao2"
            @cell-mouse-leave="leave_dibiao2"
            :data="restLifeData"
            height="270"
            style="width: 100%"
          >
            <el-table-column align="center" prop="plc" label="子系统"></el-table-column>
            <el-table-column align="center" prop="string" label="设备编号"></el-table-column>
            <el-table-column align="center" prop="count" label="剩余寿命">
              <template slot-scope="scope">
                <el-tag style="background-color: rgba(230, 162, 60, 0.1)" :type="getLifeTagType(scope.row.count)">{{ scope.row.count }}天</el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { cockpitavgHealth, devicecockpitdevice2plc, cockpitpressure, getthreshold, cockpithealth, cockpitrestLife } from '@/api/api';
import * as echarts from 'echarts';

export default {
  name: 'Home',
  data() {
    return {
      dibiao_clear: '',
      dibiao_clear1: '',
      dibiao_clear2: '',

      displayList: [],
      scrollInterval: null,
      currentIndex: 0,
      scrollSpeed: 2000,
      itemHeight: 19,

      YuzhiData: {},
      healthData: [],
      pressureData: [],
      restLifeData: [],
      warningList: [
        '预计4天后设备BC1012将由良好转为亚健康',
        '预计2天后设备DCF3-03-011将由良好转为亚健康',
        '预计天后设备BC1012剩余寿命将低于阈值',
        '计3天后设备BC1012剩余寿命将低于阈值',
        '预3天后设备BC1012剩余寿命将低于阈值',
        '44计3天后设备BC1012剩余寿命将低于阈值',
        '预54计3天后设备BC1012剩余寿命将低于阈值',
        '预计eryaer3天后设备BC1012剩余寿命将低于阈值',
        '预计3dfgdfgs天后设备BC1012剩余寿命将低于阈值',
        '预计3天后设wefsdg备BC1012剩余寿命将低于阈值',
        '预计3天后设备BC10sdgsg12剩余寿命将低于阈值',
        '预计3天后设备BC1012剩dfgd余寿命将低于阈值',
        'sdfsdf预计3天后设备BC1012剩余寿命将低于阈值'
      ],
      pressureStatistics: {
        heightProgress: '',
        centerProgress: '',
        lowProgress: '',
        height: '',
        center: '',
        low: ''
      },
      healthStatistics: {
        heightProgress: '',
        centerProgress: '',
        lowProgress: '',
        height: '',
        center: '',
        low: ''
      },
      liftStatistics: {
        heightProgress: '',
        lowProgress: '',
        height: '',
        low: ''
      },
      allhealth: '',
      healthEchart: {},
      jiankangqujian: {},
      refreshTimer: null
    };
  },
  mounted() {
    this.getYuzhi();
    this.initList();
    this.startScroll();
    window.addEventListener('resize', this.handleResize);

    // 添加每小时刷新数据的定时器
    this.refreshTimer = setInterval(() => {
      this.getYuzhi();
      this.initList();
      this.startScroll();
      window.addEventListener('resize', this.handleResize);
    }, 3600000); // 3600000ms = 1小时
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.handleResize);
    // 清理所有定时器
    this.stopScroll();
    clearInterval(this.dibiao_clear);
    clearInterval(this.dibiao_clear1);
    clearInterval(this.dibiao_clear2);
    clearInterval(this.refreshTimer); // 清除刷新定时器
  },
  methods: {
    initList() {
      // 复制列表项以实现无缝滚动
      this.displayList = [...this.warningList];
    },
    startScroll() {
      this.stopScroll();
      if (this.warningList.length <= 1) return;
      if (!this.$refs.warningList) return;

      const container = this.$refs.warningList;
      let lastScrollTime = 0;
      let isResetting = false;

      this.scrollInterval = setInterval(() => {
        if (!container) {
          this.stopScroll();
          return;
        }

        // 添加时间节流（每100ms检查一次）
        const now = Date.now();
        if (now - lastScrollTime < 100) return;
        lastScrollTime = now;

        // 精确计算可滚动区域
        const currentScroll = container.scrollTop;
        const maxScroll = Math.floor(container.scrollHeight - container.clientHeight);

        // 添加调试日志
        console.log(`当前: ${currentScroll}, 最大: ${maxScroll}, 差值: ${maxScroll - currentScroll}`);

        // 精确边界判断（添加1px容差）
        if (maxScroll - currentScroll <= 1) {
          if (isResetting) return;

          isResetting = true;
          container.style.scrollBehavior = 'auto'; // 禁用平滑滚动
          container.scrollTop = 0;

          // 下一帧恢复
          requestAnimationFrame(() => {
            container.style.scrollBehavior = '';
            isResetting = false;
          });
        } else {
          container.scrollTop = currentScroll + 1;
        }
      }, 50);
    },
    stopScroll() {
      if (this.scrollInterval) {
        clearInterval(this.scrollInterval);
        this.scrollInterval = null;
      }
    },
    /*
      获取阈值
    **/
    getYuzhi() {
      // getthreshold().then((res) => {
      // 假数据
      let res = {
        success: true,
        time: 455,
        sid: 'a58953c8-12ca-4671-a565-41d22a47a97a',
        data: {
          healthUpper: 90.0,
          healthLower: 80.0,
          subHealthUpper: 90.0,
          subHealthLower: 80.0,
          goodUpper: 79.0,
          goodLower: 60.0,
          pressureHighUpper: 1.2,
          pressureHighLower: 1.0,
          pressureMidUpper: 0.8,
          pressureMidLower: 0.6,
          pressureLowUpper: 0.5,
          pressureLowLower: 0.3,
          lifePredict: 365,
          residualLife: 30,
          faultPredict: 0.8,
          healthMaintain: 0.7,
          maintainSuggestion: 0.6
        },
        errorcode: 200,
        errorcase: '成功'
      };
      let result = res.data;
      result.pressureHighUpper = result.pressureHighUpper * 100;
      result.pressureHighLower = result.pressureHighLower * 100;
      result.pressureMidUpper = result.pressureMidUpper * 100;
      result.pressureMidLower = result.pressureMidLower * 100;
      result.pressureLowUpper = result.pressureLowUpper * 100;
      result.pressureLowLower = result.pressureLowLower * 100;
      this.YuzhiData = result;

      this.getPressureStatistics();
      this.gethealthStatistics();
      this.getAgeStatistics();
      this.getAllhealth();
      this.getHealthData();
      this.getPressureData();
      this.getRestLifeData();
      this.getWarningsData();
      // });
    },
    /*
      设备压力统计
    **/
    getPressureStatistics() {
      // cockpitpressure().then((res) => {
      // 假数据
      let res = {
        code: 200,
        msg: 'success',
        data: [
          { count: 150, string: '设备A压力', plc: 'PLC-001' },
          { count: 90, string: '设备B压力', plc: 'PLC-002' },
          { count: 100, string: '设备A压力', plc: 'PLC-001' },
          { count: 110, string: '设备B压力', plc: 'PLC-002' }
        ]
      };

      let yaliqujian = {
        height: this.YuzhiData.pressureHighUpper + '-' + this.YuzhiData.pressureHighLower,
        center: this.YuzhiData.pressureMidUpper + '-' + this.YuzhiData.pressureMidLower,
        low: this.YuzhiData.pressureLowUpper + '-' + this.YuzhiData.pressureLowLower
      };
      let obj = { height: 0, center: 0, low: 0 }; // 初始化为 0
      res.data.forEach((item) => {
        const count = item.count;
        for (const [rangeKey, rangeStr] of Object.entries(yaliqujian)) {
          const [minStr, maxStr] = rangeStr.split('-').map(Number);
          const min = Math.min(minStr, maxStr); // 确保 min < max
          const max = Math.max(minStr, maxStr);

          if (count >= min && count <= max) {
            obj[rangeKey]++; // 匹配则 +1
            break; // 找到一个匹配后跳出循环
          }
        }
        this.pressureStatistics.height = obj.height;
        this.pressureStatistics.center = obj.center;
        this.pressureStatistics.low = obj.low;
        this.pressureStatistics.heightProgress = Math.round((Number(obj.height) / Number(res.data.length)) * 100); // 46%
        this.pressureStatistics.centerProgress = Math.round((Number(obj.center) / Number(res.data.length)) * 100); // 30%
        this.pressureStatistics.lowProgress = Math.round((Number(obj.low) / Number(res.data.length)) * 100);
      });
      // });
    },
    /*
      设备健康度统计
    **/
    gethealthStatistics() {
      // cockpithealth().then((res) => {
      // 假数据
      let res = {
        code: 200,
        msg: 'success',
        data: [
          {
            count: 80,
            string: '设备E健康度',
            plc: 'PLC-005'
          },
          {
            count: 60,
            string: '设备F健康度',
            plc: 'PLC-006'
          }
        ]
      };
      this.jiankangqujian = {
        height: this.YuzhiData.healthUpper + '-' + this.YuzhiData.healthLower,
        center: this.YuzhiData.subHealthUpper + '-' + this.YuzhiData.subHealthLower,
        low: this.YuzhiData.goodUpper + '-' + this.YuzhiData.goodLower
      };

      let obj = { height: 0, center: 0, low: 0 }; // 初始化为 0
      res.data.forEach((item) => {
        const count = item.count;
        for (const [rangeKey, rangeStr] of Object.entries(this.jiankangqujian)) {
          const [minStr, maxStr] = rangeStr.split('-').map(Number);
          const min = Math.min(minStr, maxStr); // 确保 min < max
          const max = Math.max(minStr, maxStr);

          if (count >= min && count <= max) {
            obj[rangeKey]++; // 匹配则 +1
            break; // 找到一个匹配后跳出循环
          }
        }
        this.healthStatistics.height = obj.height;
        this.healthStatistics.center = obj.center;
        this.healthStatistics.low = obj.low;
        this.healthStatistics.heightProgress = Math.round((Number(obj.height) / Number(res.data.length)) * 100);
        this.healthStatistics.centerProgress = Math.round((Number(obj.center) / Number(res.data.length)) * 100);
        this.healthStatistics.lowProgress = Math.round((Number(obj.low) / Number(res.data.length)) * 100);
      });
      // });
    },
    /*
      设备剩余寿命统计
    **/
    getAgeStatistics() {
      // cockpitrestLife().then((res) => {
      // 假数据
      let res = {
        code: 200,
        msg: 'success',
        data: [
          {
            count: 80,
            string: '设备C寿命',
            plc: 'PLC-003'
          },
          {
            count: 120,
            string: '设备D寿命',
            plc: 'PLC-004'
          }
        ]
      };
      let obj = { height: 0, low: 0 };
      res.data.forEach((item) => {
        if (item.count >= this.YuzhiData.lifePredict) {
          obj.height++; // 高于 300，height +1
        } else if (item.count < this.YuzhiData.lifePredict) {
          obj.low++; // 低于 300，low +1
        }
        // 如果等于 300，则不处理（根据需求调整）
      });
      this.liftStatistics.height = obj.height;
      this.liftStatistics.low = obj.low;
      this.liftStatistics.heightProgress = Math.round((Number(obj.height) / Number(res.data.length)) * 100);
      this.liftStatistics.lowProgress = Math.round((Number(obj.low) / Number(res.data.length)) * 100);
      // });
    },
    /*
      亚健康设备展示
    **/
    getHealthData() {
      // cockpithealth({Integer:this.YuzhiData.subHealthUpper}).then((res) => {
      // 假数据
      let res = {
        code: 200,
        msg: 'success',
        data: [
          {
            count: 200,
            string: '设备E健康度',
            plc: 'PLC-005'
          },
          {
            count: 150,
            string: '设备F健康度',
            plc: 'PLC-006'
          },
          {
            count: 100,
            string: '设备E健康度',
            plc: 'PLC-005'
          },
          {
            count: 150,
            string: '设备F健康度',
            plc: 'PLC-006'
          },
          {
            count: 230,
            string: '设备E健康度',
            plc: 'PLC-005'
          },
          {
            count: 50,
            string: '设备F健康度',
            plc: 'PLC-006'
          },
          {
            count: 200,
            string: '设备E健康度',
            plc: 'PLC-005'
          },
          {
            count: 150,
            string: '设备F健康度',
            plc: 'PLC-006'
          }
        ]
      };
      const sortedData = res.data.sort((a, b) => a.count - b.count);
      this.healthData = sortedData;
      this.healthData.forEach((item) => {
        item.count = item.count + '%';
      });
      this.tableData_dibiao();
      // });
    },
    /*
      压力较高设备展示
    **/
    getPressureData() {
      // cockpitpressure({Integer:this.YuzhiData.pressureHighLower}).then((res) => {
      // 假数据
      let res = {
        code: 200,
        msg: 'success',
        data: [
          {
            count: 150,
            string: '设备A压力',
            plc: 'PLC-001'
          },
          {
            count: 90,
            string: '设备B压力',
            plc: 'PLC-002'
          },
          {
            count: 150,
            string: '设备A压力',
            plc: 'PLC-001'
          },
          {
            count: 100,
            string: '设备B压力',
            plc: 'PLC-002'
          },
          {
            count: 190,
            string: '设备A压力',
            plc: 'PLC-001'
          },
          {
            count: 90,
            string: '设备B压力',
            plc: 'PLC-002'
          },
          {
            count: 190,
            string: '设备A压力',
            plc: 'PLC-001'
          },
          {
            count: 90,
            string: '设备B压力',
            plc: 'PLC-002'
          }
        ]
      };
      const sortedData = res.data.sort((a, b) => b.count - a.count);
      this.pressureData = sortedData;
      this.pressureData.forEach((item) => {
        item.count = item.count + '%';
      });
      this.tableData_dibiao1();
      // });
    },
    /*
      剩余寿命较低设备展示
    **/
    getRestLifeData() {
      // cockpitrestLife({Integer:this.YuzhiData.lifePredict}).then((res) => {
      // 假数据
      let res = {
        code: 200,
        msg: 'success',
        data: [
          {
            count: 80,
            string: '设备C寿命',
            plc: 'PLC-003'
          },
          {
            count: 100,
            string: '设备D寿命',
            plc: 'PLC-004'
          },
          {
            count: 80,
            string: '设备C寿命',
            plc: 'PLC-003'
          },
          {
            count: 190,
            string: '设备D寿命',
            plc: 'PLC-004'
          },
          {
            count: 70,
            string: '设备C寿命',
            plc: 'PLC-003'
          },
          {
            count: 120,
            string: '设备D寿命',
            plc: 'PLC-004'
          },
          {
            count: 180,
            string: '设备C寿命',
            plc: 'PLC-003'
          },
          {
            count: 150,
            string: '设备D寿命',
            plc: 'PLC-004'
          }
        ]
      };
      const sortedData = res.data.sort((a, b) => a.count - b.count);
      this.restLifeData = sortedData;
      this.tableData_dibiao2();
      // });
    },
    /*
      总体健康度
    **/
    getAllhealth() {
      // cockpitavgHealth().then((res) => {
      // 假数据
      let res = {
        success: true,
        time: 455,
        sid: 'a58953c8-12ca-4671-a565-41d22a47a97a',
        data: { 'PLC-A01': 100, 'PLC-B02': 96, PLC05: 99, PLC06: 97, PLC07: null },
        errorcode: 200,
        errorcase: '成功'
      };
      this.healthEchart = res.data;
      this.allhealth = 0;
      let sum = 0;
      let validCount = 0;

      Object.values(res.data).forEach((value) => {
        if (typeof value === 'number' && !isNaN(value)) {
          sum += value;
          validCount++;
        }
      });

      this.allhealth = validCount > 0 ? sum / validCount : 0; // 避免除以 0
      this.getCenterCount();
      // });
    },
    /*
      子系统健康度
    **/
    getCenterCount() {
      // devicecockpitdevice2plc().then((res) => {
      // 假数据
      let res = {
        success: true,
        time: 455,
        sid: 'a58953c8-12ca-4671-a565-41d22a47a97a',
        data: {
          PLC1: [
            { deviceCode: 'DEVICE202311001', health: 60.0 },
            { deviceCode: 'DEVICE202311002', health: 60.0 },
            { deviceCode: 'DEVICE202311002', health: 60.0 },
            { deviceCode: 'DEVICE202311002', health: 60.0 },
            { deviceCode: 'DEVICE202311002', health: 60.0 }
          ],
          PLC2: [{ deviceCode: 'DEVICE202311003', health: 60.0 }],
          PLC3: [{ deviceCode: 'DEVICE202311004', health: 70.0 }],
          PLC4: [{ deviceCode: 'DEVICE202311004', health: 63.0 }],
          PLC5: [{ deviceCode: 'DEVICE202311004', health: 70.0 }],
          PLC6: [{ deviceCode: 'DEVICE202311004', health: 70.0 }]
        },
        errorcode: 200,
        errorcase: '成功'
      };
      this.healthEchart = { PLC1: 100, PLC2: 86, PLC3: 90, PLC4: 63, PLC5: 90, PLC6: 63 };
      this.jiankangqujian = {
        height: '120-100',
        center: '90-80',
        low: '79-60'
      };

      const mergedData = Object.entries(this.healthEchart).map(([name, healthValue]) => {
        // 处理健康区间
        const ranges = {
          height: this.jiankangqujian.height.split('-').map(Number),
          center: this.jiankangqujian.center.split('-').map(Number),
          low: this.jiankangqujian.low.split('-').map(Number)
        };

        // 确定类型和提示
        let type,
          tips = '',
          color;
        if (healthValue >= ranges.height[1] && healthValue <= ranges.height[0]) {
          type = 1;
          color = '#91cc75'; // 绿
        } else if (healthValue >= ranges.center[1] && healthValue <= ranges.center[0]) {
          type = 2;
          tips = '该子系统健康度较低，建议对该子系统的设备进行维护';
          color = '#ffdc60'; // 黄
        } else if (healthValue >= ranges.low[1] && healthValue <= ranges.low[0]) {
          type = 3;
          color = '#7dd2f3'; // 蓝
        } else {
          type = 0;
          color = '#999'; // 默认灰色
        }

        // 直接从res.data获取设备数量
        const deviceCount = res.data[name] ? res.data[name].length : 0;

        return {
          type,
          name,
          tips,
          value: deviceCount,
          health: healthValue,
          itemStyle: {
            color: color
            // borderColor: '#fff', // 可选：添加边框色
            // borderWidth: 1 // 可选：边框宽度
          }
        };
      });
      console.log(mergedData);

      this.initHealthChart(mergedData);
      // });
    },
    /*
      预测异常预警
    **/
    getWarningsData() {
      // cockpitwarnings().then((res) => {
      // 假数据
      let res = {
        code: 200,
        message: '成功',
        data: [
          '预计4天后设备BC1012将由良好转为亚健康',
          '预计2天后设备DCF3-03-011将由良好转为亚健康',
          '预计天后设备BC1012剩余寿命将低于阈值',
          '计3天后设备BC1012剩余寿命将低于阈值',
          '预3天后设备BC1012剩余寿命将低于阈值',
          '44计3天后设备BC1012剩余寿命将低于阈值',
          '预54计3天后设备BC1012剩余寿命将低于阈值',
          '预计eryaer3天后设备BC1012剩余寿命将低于阈值',
          '预计3dfgdfgs天后设备BC1012剩余寿命将低于阈值',
          '预计3天后设wefsdg备BC1012剩余寿命将低于阈值',
          '预计3天后设备BC10sdgsg12剩余寿命将低于阈值',
          '预计3天后设备BC1012剩dfgd余寿命将低于阈值',
          'sdfsdf预计3天后设备BC1012剩余寿命将低于阈值'
        ]
      };
      this.warningList = res.data;
      // });
    },
    handleResize() {
      this.$refs.healthChart && echarts.getInstanceByDom(this.$refs.healthChart).resize();
    },
    getLifeTagType(days) {
      // if (days <= 30) return "danger";
      // if (days <= 60) return "warning";
      return 'success';
    },
    initHealthChart(rawData) {
      const chart = echarts.init(this.$refs.healthChart);
      const option = {
        title: {
          // text: "Nominal GDP (Billions of U.S. dollars)",
          left: 'center'
        },
        tooltip: {
          trigger: 'item',
          formatter: function (params) {
            // 确保 params.data 存在
            const data = params.data || {};

            return `
      <div>设备编号：${params.name}</div>
      <div>健康度：${data.health}</div>
      ${data.type === 2 ? `<div style="font-weight:bold;color:red">${data.tips || ''}</div>` : ''}
            `;
          }
        },
        series: [
          {
            name: '健康度',
            type: 'treemap',
            label: {
              color: '#fff'
            },
            visibleMin: 300,
            data: rawData,
            leafDepth: 2,
            breadcrumb: {
              show: false //隐藏底部导航条
            },
            levels: [
              {
                itemStyle: {
                  normal: {
                    borderColor: '#555',
                    borderWidth: 1,
                    gapWidth: 1
                  }
                }
              },
              {
                colorSaturation: [0.3, 0.6],
                itemStyle: {
                  normal: {
                    borderColorSaturation: 0.7,
                    gapWidth: 1,
                    borderWidth: 2
                  }
                }
              },
              {
                colorSaturation: [0.3, 0.5],
                itemStyle: {
                  normal: {
                    borderColorSaturation: 0.6,
                    gapWidth: 1
                  }
                }
              },
              {
                colorSaturation: [0.3, 0.5]
              }
            ]
          }
        ]
      };

      chart.setOption(option);
    },
    tableData_dibiao() {
      const table = this.$refs.tableData_realtime;
      const divData = table.bodyWrapper;
      this.dibiao_clear = setInterval(() => {
        divData.scrollTop += 1;
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0;
        }
      }, 100);
    },
    tableData_dibiao1() {
      const table = this.$refs.tableData_realtime1;
      const divData = table.bodyWrapper;
      this.dibiao_clear1 = setInterval(() => {
        divData.scrollTop += 1;
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0;
        }
      }, 100);
    },
    tableData_dibiao2() {
      const table = this.$refs.tableData_realtime2;
      const divData = table.bodyWrapper;
      this.dibiao_clear2 = setInterval(() => {
        divData.scrollTop += 1;
        if (divData.clientHeight + divData.scrollTop == divData.scrollHeight) {
          divData.scrollTop = 0;
        }
      }, 100);
    },
    hover_dibiao() {
      //鼠标移入清除定时器(暂停轮播)clearInterval(this.dibiao clear
      clearInterval(this.dibiao_clear);
    },
    leave_dibiao() {
      //鼠标移出继续执行轮播this.tableData dibiao()
      this.tableData_dibiao();
    },
    hover_dibiao1() {
      clearInterval(this.dibiao_clear1);
    },
    leave_dibiao1() {
      this.tableData_dibiao1();
    },
    hover_dibiao2() {
      clearInterval(this.dibiao_clear2);
    },
    leave_dibiao2() {
      this.tableData_dibiao2();
    }
  }
};
</script>

<style lang="scss" scoped>
.home {
  padding: 10px 0;
  background-color: #f5f7fa;
  // min-height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  .stat-cards {
    margin-bottom: 10px;
    width: 32.6%;
  }

  .card-header {
    display: flex;
    align-items: center;
    // margin-bottom: 20px;

    i {
      margin-right: 8px;
      font-size: 20px;
      color: #409eff;
    }

    .header-right {
      margin-left: auto;
    }
  }

  .stat-card {
    transition: all 0.3s;

    &:hover {
      transform: translateY(-5px);
    }

    .card-title {
      font-size: 16px;
      font-weight: bold;
      color: #303133;
    }

    .stat-content {
      text-align: center;
      margin-top: 20px;
      .health-score {
        margin-bottom: 10px;
      }

      .stat-item {
        text-align: center;
        padding: 10px;
        border-radius: 4px;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.05);
        }

        &.yellow {
          background-color: rgba(230, 162, 60, 0.1);
          .percentage {
            color: #e6a23c;
          }
        }

        &.blue {
          background-color: rgba(64, 158, 255, 0.1);
          .percentage {
            color: #409eff;
          }
        }

        &.green {
          background-color: rgba(103, 194, 58, 0.1);
          .percentage {
            color: #67c23a;
          }
        }

        .percentage {
          font-size: 24px;
          font-weight: bold;
          margin-bottom: 5px;
        }

        .label {
          font-size: 14px;
          color: #606266;
        }
      }
    }
  }
  .detail-cards {
    width: 100%;
    display: flex;
    justify-content: space-around;
    .card-header {
      justify-content: center;
      font-weight: 700;
    }
    .cardsBox {
      width: 28%;

      .detail-card {
        margin-bottom: 10px;
        height: 48.7%;

        .warning-list {
          height: 270px;
          overflow-y: auto;
          scroll-behavior: smooth;

          &::-webkit-scrollbar {
            width: 6px;
          }

          &::-webkit-scrollbar-thumb {
            background-color: #909399;
            border-radius: 3px;
          }

          &::-webkit-scrollbar-track {
            background-color: #f5f7fa;
          }

          .warning-item {
            height: 19px;
            padding: 12px;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            align-items: center;
            transition: all 0.3s;

            &:hover {
              background-color: #f5f7fa;
            }

            i {
              color: #e6a23c;
              margin-right: 10px;
              font-size: 16px;
            }

            span {
              font-size: 14px;
              color: #606266;
            }

            &:last-child {
              border-bottom: none;
            }
          }
        }
      }
      .cardCenter-detail {
        height: 99%;
      }
    }
    .cardCenter {
      width: 42%;
      height: 100%;
    }
  }

  .chart-section {
    margin-top: 20px;
  }
}
.score-text {
  margin-top: 10px;
  font-size: 14px;
  color: #606266;
}
.detail-card {
  ::v-deep .el-card__body {
    padding: 0px 20px 20px 20px !important;
  }
}
.cardCenter-detail {
  ::v-deep .el-card__body {
    padding: 20px !important;
  }
}
/*去除滚动的滚动条*/
::v-deep .el-table th.gutter {
  display: none;
  width: 0;
}
::v-deep.el-table colgroup col[name='gutter'] {
  display: none;
  width: 0;
}
::v-deep .el-table__body {
  width: 100% !important;
}
// ::v-deep .el-table--scrollable-y .el-table__body-wrapper {
//   overflow-y: hidden;
// }
::v-deep .el-scrollbar__wrap {
  overflow-x: hidden !important;
}
</style>
